import React, { Component } from 'react'
import PropTypes from "prop-types"
import {nanoid} from "nanoid"
import "./index.css"

export default class Header extends Component {

  static propTypes = {
    addTodo: PropTypes.func.isRequired
  }

  handleKeyUp = (e) => {
    let {keyCode, target} = e;
    if(keyCode != 13) return;
    let value = target.value.trim();
    if(!value.length) return;
    let todo = {
      id: nanoid(),
      name: value,
      checked: false
    }
    this.props.addTodo(todo);
    target.value = "";
  }
  render() {
    return (
      <div className="todo-header">
        <input type="text" placeholder='输入你的任务名称，按Enter键确认' onKeyUp={this.handleKeyUp} />
      </div>
    )
  }
}
